<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        width: 1200px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background: #000000;
        padding: 40px 20px;
    }

    .container {
        background: #1a1a1a;
        border-radius: 12px;
        padding: 32px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        max-width: 1200px;
        margin: 0 auto;
    }

    .header {
        text-align: center;
        margin-bottom: 40px;
        padding-bottom: 24px;
        border-bottom: 1px solid #383838;
    }

    .header h1 {
        font-size: 2rem;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 16px;
        letter-spacing: -0.5px;
    }

    .header-info {
        display: flex;
        justify-content: center;
        gap: 32px;
        margin-top: 16px;
        flex-wrap: wrap;
    }

    .header-info-item {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #a8a8a8;
        font-size: 0.875rem;
    }

    .header-info-item strong {
        color: #ffffff;
        font-weight: 600;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
        margin-bottom: 32px;
    }

    .stat-card {
        background: #262626;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        border: 1px solid #383838;
        transition: all 0.2s ease;
    }

    .stat-card:hover {
        border-color: #4a4a4a;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
        background: #2a2a2a;
    }

    .stat-card .label {
        font-size: 0.875rem;
        color: #a8a8a8;
        margin-bottom: 12px;
        font-weight: 400;
    }

    .stat-card .value {
        font-size: 1.75rem;
        font-weight: 600;
        color: #ffffff;
        letter-spacing: -0.5px;
    }

    .section {
        margin-bottom: 32px;
    }

    .section-title {
        font-size: 1.125rem;
        color: #ffffff;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid #383838;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        letter-spacing: -0.3px;
    }

    .section-title::before {
        content: '';
        width: 3px;
        height: 16px;
        background: #0095f6;
        border-radius: 2px;
    }

    .map-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
    }

    .map-card {
        background: #262626;
        border-radius: 8px;
        padding: 16px;
        border: 1px solid #383838;
        transition: all 0.2s ease;
    }

    .map-card:hover {
        border-color: #4a4a4a;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
        background: #2a2a2a;
    }

    .map-card-header {
        font-size: 1rem;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .map-card-stats {
        display: flex;
        justify-content: space-between;
        font-size: 0.875rem;
        color: #a8a8a8;
    }

    .map-card-stats span {
        display: flex;
        align-items: center;
        gap: 4px;
        font-weight: 500;
    }

    .map-card-stats .collected {
        color: #0095f6;
    }

    .map-card-stats .uncollected {
        color: #ed4956;
    }

    .uncollected-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .uncollected-type {
        background: #262626;
        border-radius: 8px;
        padding: 20px;
        border: 1px solid #383838;
    }

    .uncollected-type-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #383838;
    }

    .uncollected-type-title {
        font-size: 1rem;
        font-weight: 600;
        color: #ffffff;
    }

    .uncollected-type-count {
        background: #0095f6;
        color: white;
        padding: 4px 12px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.875rem;
    }

    .uncollected-items {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px;
    }

    .uncollected-item {
        background: #1f1f1f;
        padding: 12px;
        border-radius: 8px;
        border: 1px solid #383838;
        transition: all 0.2s ease;
    }

    .uncollected-item:hover {
        border-color: #4a4a4a;
        background: #262626;
    }

    .uncollected-item-name {
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 6px;
        font-size: 0.875rem;
    }

    .uncollected-item-count {
        color: #ed4956;
        font-size: 0.8125rem;
        font-weight: 500;
    }

    .season-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .season-card {
        background: #262626;
        border-radius: 8px;
        padding: 16px;
        text-align: center;
        border: 1px solid #383838;
        transition: all 0.2s ease;
    }

    .season-card:hover {
        border-color: #4a4a4a;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
        background: #2a2a2a;
    }

    .season-card-name {
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 12px;
        font-size: 0.9375rem;
    }

    .season-card-stats {
        display: flex;
        justify-content: space-around;
        font-size: 0.8125rem;
        color: #a8a8a8;
        margin-top: 8px;
    }

    .season-card .collected {
        color: #0095f6;
        font-weight: 500;
    }

    .season-card .uncollected {
        color: #ed4956;
        font-weight: 500;
    }

    @media (max-width: 768px) {
        body {
            width: 100%;
            padding: 16px;
        }

        .container {
            padding: 20px;
            border-radius: 0;
        }

        .header h1 {
            font-size: 1.5rem;
        }

        .stats-grid {
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .map-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="container">
    <div class="header">
        <h1>光翼收集统计</h1>
        <div class="header-info">
            <div class="header-info-item">
                <strong>角色ID:</strong> <span id="roleId">{{roleId}}</span>
            </div>
            <div class="header-info-item">
                <strong>更新时间:</strong> <span id="timestamp">{{timestamp}}</span>
            </div>
        </div>
    </div>

    <div class="stats-grid" id="statsGrid">
        <div class="stat-card">
            <div class="label">总光翼数</div>
            <div class="value">{{statistics.total}}</div>
        </div>
        <div class="stat-card">
            <div class="label">已收集</div>
            <div class="value" style="color: #0095f6;">{{statistics.collected}}</div>
        </div>
        <div class="stat-card">
            <div class="label">未收集</div>
            <div class="value" style="color: #ed4956;">{{statistics.actual_total - statistics.collected}}</div>
        </div>
        <div class="stat-card">
            <div class="label">收集率</div>
            <div class="value">{{statistics.collection_rate}}</div>
        </div>
        <div class="stat-card">
            <div class="label">已献祭</div>
            <div class="value">{{statistics.deposited}}</div>
        </div>
        <div class="stat-card">
            <div class="label">永无翼数</div>
            <div class="value" style="color: #f39c12;">
                {{statistics.unredeemed_permanent}}
            </div>
        </div>
    </div>

    <div class="section">
        <div class="section-title">永久光翼统计</div>
        <div class="stats-grid">
            <div class="stat-card">
                <div class="label">普通永久翼</div>
                <div class="value">{{statistics.normal_wings.total}}</div>
                <div style="margin-top: 12px; font-size: 0.8125rem; color: #a8a8a8;">
                    已收集: <span style="color: #0095f6; font-weight: 500;">{{statistics.normal_wings.collected}}</span> | 
                    未收集: <span style="color: #ed4956; font-weight: 500;">{{statistics.normal_wings.uncollected}}</span>
                </div>
            </div>
            <div class="stat-card">
                <div class="label">永久光翼</div>
                <div class="value">{{statistics.permanent_wings.total}}</div>
                <div style="margin-top: 12px; font-size: 0.8125rem; color: #a8a8a8;">
                    已收集: <span style="color: #0095f6; font-weight: 500;">{{statistics.permanent_wings.collected}}</span> | 
                    未收集: <span style="color: #ed4956; font-weight: 500;">{{statistics.permanent_wings.uncollected}}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="section-title">地图光翼统计</div>
        <div class="map-grid" id="mapGrid"></div>
    </div>

    <div class="section" id="uncollectedSection" style="display: none;">
        <div class="section-title">未收集光翼详情</div>
        <div class="uncollected-list" id="uncollectedList"></div>
    </div>

    <div class="section" id="seasonSection" style="display: none;">
        <div class="section-title">季节光翼统计</div>
        <div class="season-list" id="seasonList"></div>
    </div>
</div>

<script>
    // 解析JSON数据
    const mapStatistics = JSON.parse('{{@mapStatisticsJson}}');
    const uncollectedByType = JSON.parse('{{@uncollectedByTypeJson}}');
    const seasonStatistics = JSON.parse('{{@seasonStatisticsJson}}');

    // 渲染地图统计
    function renderMapStatistics() {
        const mapGrid = document.getElementById('mapGrid');
        if (!mapStatistics || Object.keys(mapStatistics).length === 0) {
            return;
        }

        for (const [mapName, stats] of Object.entries(mapStatistics)) {
            const card = document.createElement('div');
            card.className = 'map-card';
            card.innerHTML = `
                <div class="map-card-header">
                    <span>${mapName}</span>
                    <span style="font-size: 0.875rem; color: #a8a8a8; font-weight: 500;">${stats.total}个</span>
                </div>
                <div class="map-card-stats">
                    <span class="collected">✓ ${stats.collected}</span>
                    <span class="uncollected">✗ ${stats.uncollected}</span>
                </div>
            `;
            mapGrid.appendChild(card);
        }
    }

    // 渲染未收集光翼详情
    function renderUncollectedList() {
        const uncollectedList = document.getElementById('uncollectedList');
        const uncollectedSection = document.getElementById('uncollectedSection');
        
        if (!uncollectedByType || Object.keys(uncollectedByType).length === 0) {
            return;
        }

        uncollectedSection.style.display = 'block';

        for (const [type, items] of Object.entries(uncollectedByType)) {
            const typeDiv = document.createElement('div');
            typeDiv.className = 'uncollected-type';
            typeDiv.innerHTML = `
                <div class="uncollected-type-header">
                    <div class="uncollected-type-title">${type}</div>
                    <div class="uncollected-type-count">${items.length}类</div>
                </div>
                <div class="uncollected-items"></div>
            `;

            const itemsContainer = typeDiv.querySelector('.uncollected-items');
            items.forEach(item => {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'uncollected-item';
                itemDiv.innerHTML = `
                    <div class="uncollected-item-name">${item.name}</div>
                    <div class="uncollected-item-count">缺少 ${item.uncollected} 个</div>
                `;
                itemsContainer.appendChild(itemDiv);
            });

            uncollectedList.appendChild(typeDiv);
        }
    }

    // 渲染季节统计
    function renderSeasonStatistics() {
        const seasonList = document.getElementById('seasonList');
        const seasonSection = document.getElementById('seasonSection');
        
        if (!seasonStatistics || Object.keys(seasonStatistics).length === 0) {
            return;
        }

        seasonSection.style.display = 'block';

        for (const [seasonName, stats] of Object.entries(seasonStatistics)) {
            const card = document.createElement('div');
            card.className = 'season-card';
            card.innerHTML = `
                <div class="season-card-name">${seasonName}</div>
                <div class="season-card-stats">
                    <span class="collected">✓ ${stats.collected}</span>
                    <span class="uncollected">✗ ${stats.uncollected}</span>
                </div>
            `;
            seasonList.appendChild(card);
        }
    }

    // 初始化渲染
    document.addEventListener('DOMContentLoaded', function() {
        renderMapStatistics();
        renderUncollectedList();
        renderSeasonStatistics();
    });
</script>
